<%@ page language="java" contentType="text/html; charset=UTF8" pageEncoding="UTF8"%>
<%@page import="db.mysql.mySqlUtils"%>
<%
request.setCharacterEncoding("utf8");
%>
<script type="text/javascript">
var data;
var tab = 'goods';
var kindValue = ":";
function getGoods(){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?class=goomi.goods.goodsService&method=getGoods&para=" + "3" ;
		$.getJSON(url, 
			function(json){
				data = json;
				getKind();
		});
	}catch(e){
		alert(e);
	}
}

function getColor(){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?class=goomi.color.colorService&method=getColors&para=" + "all" ;
		$.getJSON(url, 
			function(json){
			$(json).each(function(i,item){
				$('#color').append('<option value="' + item.id + '">' + item.color + '</option>');
			});
		});
	}catch(e){
		alert(e);
	}
}

function getSize(){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?class=goomi.size.sizeService&method=getSize&para=" + "all" ;
		$.getJSON(url, 
			function(json){
			$(json).each(function(i,item){
				$('#size').append('<option value="' + item.id + '">' + item.size + '</option>');
			});
		});
	}catch(e){
		alert(e);
	}
}

var childData;
function getChild(){
	try{
		//alert(1);
		var url = "Ajax.template?class=goomi.member.memberService&method=getChild&constructor=HttpServletRequest&para=<%=session.getAttribute("id")%>" ;
		$.getJSON(url, 
			function(json){
				childData = json;
				loadChildGrid();
		});
	}catch(e){
		alert(e);
	}
}

function getKind(){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?class=goomi.goods.goodsService&method=getKind&para=" + "all" ;
		$.getJSON(url, 
			function(json){
			$(json).each(function(i,item){
				kindValue += ";" + item.db_id + ":" + item.kind;
			});
			loadGrid();
		});
	}catch(e){
		alert(e);
	}
}


function deleteId(id){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?action=edit&oper=delete&table=" + tab + "&id=" + id ;
		$.getJSON(url, 
			function(json){
//OK
		});
	}catch(e){
		alert(e);
	}
}

//id name description kind_id create_date line_flag fire_flag cust_flag
var lastSelect;
function loadGrid(){
    jQuery("#dataGrid").jqGrid({
      datatype: "local",
      height: 500,
      colNames:['db_id','picture_id','商品名稱', '產品介紹', '類別','圖片'],
      colModel:[
		//{name:'id',index:'id', width:60, sorttype:"int",hidden:false},
        {name:'db_id',index:'db_id', width:60, sorttype:"int",editable:true,hidden:true},
        {name:'picture_id',index:'db_id', width:60, sorttype:"int",editable:true,hidden:true},
        {name:'name',index:'name', width:90,editable:true},
        {name:'description',index:'description', width:100,editable:true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
        {name:'kind_id',index:'kind_id', width:100,editable:true,edittype:"select",editoptions:{value:kindValue}},
        {name:'pic',index:'pic', width:100,editable:false}
        
      ],
      rowNum:10,
     	rowList:[10,20,30],
      //multiselect: true,
      onSelectRow: function(id){
  		if(id && id !== lastSelect){
  			//if(lastSelect){
  			//	jQuery("#dataGrid").jqGrid('saveRow',lastSelect, checksave);
  			//}
  			//jQuery('#dataGrid').jqGrid('restoreRow',lastSelect);
  			//jQuery('#dataGrid').jqGrid('editRow',id,true);
  			$('#showImg').attr('src', "/Goomi/Download.template?type=img&id=" + jQuery("#dataGrid").getLocalRow(id).picture_id);
  			$('#showImg').show();
  			$('#custBut').show();
  			$('#custDiv').hide();
  			$('#goods_id').val(jQuery("#dataGrid").getLocalRow(id).db_id);
  			lastSelect=id;
  		}
  	},
	gridComplete: function(){
		var ids = jQuery("#dataGrid").jqGrid('getDataIDs');
		for(var i=0;i < ids.length;i++){
			var cl = ids[i];
			//up = "<input style='height:22px;width:20px;' type='button' value='U' onclick=\"uploadPic('" + jQuery("#dataGrid").getLocalRow(cl).db_id + "');\"  />"; 
			img = "<img width=50 height=50 id='img" + jQuery("#dataGrid").getLocalRow(cl).db_id + "' src=\"/Goomi/Download.template?type=img&id=" + jQuery("#dataGrid").getLocalRow(cl).picture_id + "\"/>" + jQuery("#dataGrid").getLocalRow(cl).picture_id; 
			jQuery("#dataGrid").jqGrid('setRowData',ids[i],{pic:img});
		}	// jQuery("#dataGrid").getLocalRow(ids[i]).picture_id 
	},
  	editurl: "/Goomi/Ajax.template?action=edit&table=" + tab,
      caption: "訂製123"
    });  // jqGrid
 
    for(var i=0;i <= data.length;i++)
      jQuery("#dataGrid").jqGrid('addRowData',i+1,data[i]);
}


function loadChildGrid(){
    jQuery("#childDataGrid").jqGrid({
      datatype: "local",
      height: 150,
      colNames:['id','parent_id', '小孩名字','體重(kg)','身高(cm)','性別','照片'],
      colModel:[
        {name:'id',index:'id', width:60, sorttype:"int",hidden:true},
        {name:'parent_id',index:'parent_id', width:90,hidden:true},
        {name:'name',index:'parent_id', width:90,editable:true},
        {name:'weight',index:'parent_id', width:90,editable:true},
        {name:'height',index:'parent_id', width:90,editable:true},
        {name:'sex',index:'parent_id', width:90,editable:true},
        {name:'picture_id',index:'picture_id', width:90,editable:true}
      ],
      //multiselect: true,
      onSelectRow: function(id){
  		if(id && id !== lastSelect){
  			//if(lastSelect){
  			//	jQuery("#dataGrid").jqGrid('saveRow',lastSelect, checksave);
  			//}
  			//jQuery('#dataGrid').jqGrid('restoreRow',lastSelect);
  			//jQuery('#dataGrid').jqGrid('editRow',id,true);
  			//lastSelect=id;
  		}
  	},
  	editurl: "/Goomi/Ajax.template?action=edit&table=child&parent_id=<%=session.getAttribute("id")%>",
      caption: "小朋友資料"
    });  // jqGrid
 
    for(var i=0;i <= childData.length;i++)
      jQuery("#childDataGrid").jqGrid('addRowData',i+1,data[i]);
}

function checksave(result) {
	if (result.responseText=="") {alert("Update is missing!"); return false;}
	return true;
}

$(document).ready(function() {
	getGoods();
	getChild();
	getColor();
	getSize();
	$('#showImg').hide();
	jQuery("#dataGrid").jqGrid('saveRow',lastSelect, checksave);
	
	$('#custBut').button().click(function (){
		<% if ( session.getAttribute("id") != null){ %>
		$('#custDiv').show();
		$('#orderForm').each(function(){
	        this.reset();
		});
		<% } else { %>
		$( "#login-form" ).dialog( "open" );
		<% } %>
	});
	
	$('#submit').button().click(function (){
		$('#orderForm').submit();
		$('#custDiv').hide();
		$('#findOrder').button().show();
		alert("訂製完成，您可以隨時使用訂單追蹤，追蹤訂單進度。");
	});
	
	$('#custBut').hide();
	$('#custDiv').hide();
	$('#orderFrame').hide();
	$('#findOrder').hide();
});
</script>

<table width="100%">
<tr><td>
<table id="dataGrid"><tbody></tbody></table>
</td><td>
<img id=showImg src=""/>
</td><td valign="top">
<button id=custBut>訂製</button> <button id=findOrder>訂單追蹤</button>
<div id=custDiv>
	<form id='orderForm' target="postFrame" action="/Goomi/Ajax.template">
		<input type="hidden" id=action name=action value="edit" />
		<input type="hidden" id=table name=table value="`order`" />
		<input type="hidden" id=oper name=oper value="add" />
		<input type="hidden" id=status name=status value="new" />
		<input type="hidden" id=member_id name=member_id value="<%=session.getAttribute("id") %>" />
		<input type="hidden" id=id name=id value="_empty" />
		
		<input type="hidden" id="goods_id" name="goods_id" value="" />
		size:<select id="size" name="size_id">
		</select><br>
		color:
		<select id="color" name="color_id">
		</select>
		<br>備註:<input type="text" id="remark" name="remark" value="" size=50 maxlength="500"/>
		<button id='submit'>送出</button>
	</form>
	<table id="childDataGrid"></table>
	 <iframe id="portFrame" frameborder="0" onchange="alert(123);"></iframe>
</div>
</td>
</tr></table>
</body>
</html>
 